<template>
  <div class="container">
    <div class="left">
      <div class="menu-header">
        <div class="menu-img">
          <div class="menu-logo">
            <img src="@assets/menu/logo.png" alt="" />
          </div>
          <div class="menu-ai">
            <img src="@assets/menu/AI.png" alt="" />
          </div>
        </div>
        <div class="menu-list">
          <div class="menu-item" v-for="item in menuList" :key="item.id" @click="btn(item)" :class="{active:currentIndex == item.id}">
            <img :src="item.image" alt="" />
            <p>{{ item.text }}</p>
          </div>
        </div>
      </div>
      <!-- 登录状态 -->
      <div v-if="userStore.userState" class="login">
        <div class="login-btn" @click="isShow = true">
          <img :src="userStore.userInfo.logo" alt="" />
          <span>{{ userStore.userInfo.nickName }}</span>
        </div>
        <div v-show="isShow" class="loginList">
          <div class="setting" @click="userConfig">账号设置</div>
          <div class="exit" @click="loginOut">退出登录</div>
        </div>
      </div>
      <!-- 未登录状态 -->
      <div class="login" v-else>
        <div class="login-btn" @click="login">
          <img src="@img/login/p.png" alt="" />
          <span>登录</span>
        </div>
      </div>
    </div>
    <div class="right">
      <RouterView />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import useLogin from "@hooks/useLogin";
import img1 from "@/assets/menu/dialogue.png";
import img2 from "@/assets/menu/interview.png";
import img3 from "@/assets/menu/programmer.png";
import { useRouter } from "vue-router";
import { useUserStore } from "@stores/useUserStore";
import { getCurrentInstance, ComponentInternalInstance } from 'vue'
import { useChatStore } from '@stores/useChatStore'
import { chatList,IChatListItem } from '@api/chat'

const menuList = ref([
  { id: "1", image: img1, text: "智能对话", label: '/chat' },
  { id: "2", image: img2, text: "模拟面试", label: '/chat' },
  { id: "3", image: img3, text: "程序员", label: '/programmer' },
]);
let router = useRouter();
let userStore = useUserStore();
let { proxy } = getCurrentInstance() as ComponentInternalInstance
let isShow = ref(false) // 显示 账号设置 页面
let useChat = useChatStore()
let currentIndex = ref('1')

const btn = async (item) => {
  let { id, label } = item
  let chatId = 0
  if (id == 1) {
    let res = await chatList({ type: item.id })
    useChat.menuList = res.data
    chatId = res.data[0].id
  }
  currentIndex.value = item.id
  router.push({
    path: label,
    query: {id: chatId}
  })
}

const login = () => {
  proxy.$showLoginDialog()
}
const loginOut = () => {
  userStore.removeUserInfo();
  router.push("/");
};
// 账号设置
const userConfig = () => {
  router.push("/userConfig");
  isShow.value = false;
};
watch(
  () => window.location.href,
  async (newUrl, oldUrl) => {
    const urlParams = new URLSearchParams(window.location.search);
    const token = urlParams.get("token");
    useLogin(token);
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.container {
  display: flex;
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  .left {
    width: 200px;
    height: 100vh;
    background-color: #fff;
    position: relative;
    z-index: 100;
  }
  .right {
    flex: 1;
    background-color: #f2f2f2;
  }
}
.menu-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  .menu-logo {
    width: 50px;
    height: 50px;
    margin-top: 25px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .menu-ai {
    width: 60px;
    height: 25px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.menu-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  .menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 135px;
    height: 40px;
    margin-top: 18px;
    cursor: pointer;
    &.active {
      background: #f2f2f2;
      border-radius: 19px 19px 19px 19px;
    }
    img {
      width: 16px;
      height: 16px;
    }
    p {
      margin-left: 8px;
      color: #333;
      text-align: center;
    }
  }
}
.login {
  position: absolute;
  bottom: 20px;
  .loginList {
    position: absolute;
    top: -23px;
    left: 200px;
    width: 120px;
    height: 80px;
    background: #c90000;
    border-radius: 9px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .setting {
      cursor: pointer;
    }
    .exit {
      cursor: pointer;
    }
  }
}
.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 38px;
  color: #fff;
  background-color: #c90000;
  border-radius: 19px 19px 19px 19px;
  img {
    width: 25px;
    height: 25px;
    border: 50%;
  }
  span {
    margin-left: 8px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    line-height: 38px;
    font-style: normal;
    text-transform: none;
  }
}
</style>
